BOM - setInterval

Met setInterval kan je een zich herhalende blok code na een bepaald interval opnieuw laten uitvoeren.

Beschrijving

De setInterval methode heeft twee parameters. De eerste parameter dient voor het opgeven van een referentie naar een functie die om de zoveel tijd moet worden uitgevoerd. Deze functie wordt ook wel eens een calback functie genoemd. De tweede parameter geeft aan om de hoeveel tijd de functie moet worden uitgevoerd. Een interval van 1000 komt overeen met 1 seconde.

Met clearInterval kan je proces stopzetten.

var timer = setInterval(wachten, 6000);
clearInterval(timer);

In een eerste eenvoudig voorbeeld maken we een klok op een webpagina. Meer uitleg vind je in de bijgevoegde commentaar.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript - De tijd controleren met JS - setInterval</title>
    <meta charset="utf-8" />
    <meta name="application-name" content="Multimedia JavaScript">
    <meta name="description" content="De tijd controleren met JS - setInterval">
    <meta name="keywords" content="HTML, JavaScript, setInterval">
    <meta name="author" content="Jef Inghelbrecht">
</head>
<body>
    <p id="clock1">Klok 1 begint zo te tikken... en stopt na 10 seconden...</p>
    <!-- De JavaScript wordt hier geplaatst omdat het p html element
        eerst geladen moet zijn vooraleer het in JS gebruikt kan worden -->
    <script type="text/javascript">
    // Binnen de seconde gaat om de seconde de methode tick1() worden uitgevoerd.
        var clock1 = setInterval(tick1, 1000);
        // Na 10 seconden leggen we de klok stil.
        // Hier zie je het nut van anonieme functies. Als je de functie
        // clearInterval(clock1) direct als parameter zou meegeven
        // zou die ook onmiddellijk uitgevoerd worden en niet binnen 10 seconden.
        // Je kan dat zelf eens uitproberen om het verschil te zien.
        // Een andere mogelijkheid bestaat erin de clearInterval(clock1) als
        // een string door te geven. Maar dat kan een veiligheidslek creëren.
        setTimeout(function() {clearInterval(clock1)}, 10000);
        // En 5 seconden na het stoppen begint de klok weer tikken
        setTimeout(function() {setInterval(tick1, 1000);}, 15000);

        function tick1() {
            var d = new Date();
            // To access an HTML element, use the document.getElementById(id) method.
            // The id attribute defines the HTML element.
            // The innerHTML property defines the HTML content.
            document.getElementById('clock1').innerHTML = d.toLocaleTimeString();
        }
    </script>
</body>
</html>

In een tweede voorbeeld geven we een complexer voorbeeld. We werken hier met twee klokken.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript - De tijd controleren met JS - setInterval</title>
    <meta charset="utf-8" />
    <meta name="application-name" content="Multimedia JavaScript">
    <meta name="description" content="De tijd controleren met JS - setInterval">
    <meta name="keywords" content="HTML, JavaScript, setInterval">
    <meta name="author" content="Jef Inghelbrecht">
</head>
<body>
    <p id="clock1">Klok 1 begint zo te tikken... en stopt alweer 10 seconden nadat de tweede klok is gestart...</p>
    <p id="clock2">Klok 2 begint te tikken binnen 5 seconden... "</p>
    <script type="text/javascript">
        var clock1 = setInterval(tick1, 1000);
        setTimeout(function() {clearInterval(clock1)}, 15000);

        function tick1() {
            var d = new Date();
            // To access an HTML element, use the document.getElementById(id) method.
            // The id attribute defines the HTML element.
            // The innerHTML property defines the HTML content.
            document.getElementById('clock1').innerHTML = d.toLocaleTimeString();
        }

        var clock2 = setTimeout(function() {
            setInterval(tick2, 2000);
            setTimeout(function() {clearInterval(clock1)}, 15000);}, 5000);

        function tick2() {
            var d = new Date();
            // To access an HTML element, use the document.getElementById(id) method.
            // The id attribute defines the HTML element.
            // The innerHTML property defines the HTML content.
            document.getElementById('clock2').innerHTML = d.toLocaleTimeString();
        }
    </script>
</body>
</html>

Met setInterval heb je zelf geen controle over de herhaling. Het is daarom beter om een aaneengeschakelde ketting van calls naar setTimeout te gebruiken.

In de CodePen hieronder bootsen we een verkeerslicht na:

See the Pen Tijd controleren Verkeerslicht by Jef Inghelbrecht (@jef) on CodePen.

2018-02-26 22:06:28